<template>
  <div class="wrap">
    <h3>我的账单</h3>
    <ul>
      <li>
        <span>操作</span>
        <span>充值金额</span>
        <span>账户余额</span>
        <span>时间</span>
      </li>
      <li v-for="(item,index) in arr">
        <span>{{item.tit}}</span>
        <span>{{item.tit2}}</span>
        <span class="span">{{item.price}}</span>
        <span>{{item.time}}</span>
      </li>
    </ul>
  </div>

  <!--<p class="pp" v-show="show1">暂无数据,请登录</p>-->
</template>

<script>
    export default {
        name: "Mybill",
        data(){
          return{
            arr:[
              {tit:'充值',tit2:'+￥1000.00元',price:'￥3443.03元',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'消费',tit2:'-￥1000.00元',price:'￥3443.03元',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'退款',tit2:'+￥1000.00元',price:'￥3443.03元',time:'2015年9月23日 15:25:07',state:'已查看'},
              {tit:'消费',tit2:'-￥1000.00元',price:'￥3443.03元',time:'2015年9月23日 15:25:07',state:'未查看'},
              {tit:'充值',tit2:'+￥1000.00元',price:'￥3443.03元',time:'2015年9月23日 15:25:07',state:'未查看'},
            ]
          }
        }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1063px;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    font-size: 18px;
    color: #212121;
    border-bottom: 1px solid #e7e7e7;
  }

  ul{
    width: 1040px;
    margin-top: 20px;
    margin-left: 20px;
    border: 1px solid #e9e9e9;
  }
  li{
    width: 1040px;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #e9e9e9;
  }
  li:first-child{
    background: #f2f2f2;
    border-bottom:none;
  }
  li:last-child{
    border-bottom:none;
  }
  li span{
    display: inline-block;
    float: left;
    text-align: center;
    font-size: 14px;
  }
  li .span{
    color: #f08200;
  }
  li span:nth-child(1){
    width: 230px;
    height: 46px;
  }
  li span:nth-child(2){
    width: 310px;
    height: 46px;
  }
  li span:nth-child(3){
    width: 260px;
    height: 46px;
  }
  li span:nth-child(4){
    width: 240px;
    height: 46px;
  }
</style>
